<template>
  <el-form ref="clueRefFrom"
           :model="clueRemark"
           label-width="100px"
           :rules="clueRemarkRules"
           style="max-width: 95%">
    <el-form-item label="负责人">
      <div class="detail">&nbsp;{{ clueDetail.ownerDO.name }}</div>
    </el-form-item>

    <el-form-item label="所属活动">
      <div class="detail">&nbsp;{{ clueDetail.activityDO.name }}</div>
    </el-form-item>

    <el-form-item label="姓名" prop="fullName">
      <div class="detail">&nbsp;{{ clueDetail.fullName }}</div>
    </el-form-item>

    <el-form-item label="称呼">
      <div class="detail">&nbsp;{{ clueDetail.appellationDO.typeValue }}</div>
    </el-form-item>

    <el-form-item label="手机" prop="phone">
      <div class="detail">&nbsp;{{ clueDetail.phone }}</div>
    </el-form-item>

    <el-form-item label="微信">
      <div class="detail">&nbsp;{{ clueDetail.weixin }}</div>
    </el-form-item>

    <el-form-item label="QQ" prop="qq">
      <div class="detail">&nbsp;{{ clueDetail.qq }}</div>
    </el-form-item>

    <el-form-item label="邮箱" prop="email">
      <div class="detail">&nbsp;{{ clueDetail.email }}</div>
    </el-form-item>

    <el-form-item label="年龄" prop="age">
      <div class="detail">&nbsp;{{ clueDetail.age }}</div>
    </el-form-item>

    <el-form-item label="职业">
      <div class="detail">&nbsp;{{ clueDetail.job }}</div>
    </el-form-item>

    <el-form-item label="年收入" prop="yearIncome">
      <div class="detail">&nbsp;{{ clueDetail.yearIncome }}</div>
    </el-form-item>

    <el-form-item label="住址">
      <div class="detail">&nbsp;{{ clueDetail.address }}</div>
    </el-form-item>

    <el-form-item label="贷款">
      <div class="detail">&nbsp;{{ clueDetail.needLoanDO.typeValue }}</div>
    </el-form-item>

    <el-form-item label="意向状态">
      <div class="detail">&nbsp;{{ clueDetail.intentionStateDO.typeValue }}</div>
    </el-form-item>

    <el-form-item label="意向产品">
      <div class="detail">&nbsp;{{ clueDetail.intentionProductDO.name }}</div>
    </el-form-item>

    <el-form-item label="线索状态">
      <div class="detail">&nbsp;{{ clueDetail.stateDO.typeValue }}</div>
    </el-form-item>

    <el-form-item label="线索来源">
      <div class="detail">&nbsp;{{ clueDetail.sourceDO.typeValue }}</div>
    </el-form-item>

    <el-form-item label="线索描述" prop="description">
      <div class="detail">&nbsp;{{ clueDetail.description }}</div>
    </el-form-item>

    <el-form-item label="下次联系时间">
      <div class="detail">&nbsp;{{ clueDetail.nextContactTime }}</div>
    </el-form-item>

    <el-form-item label="填写跟踪记录" prop="noteContent">
      <el-input
          v-model="clueRemark.noteContent"
          style="width: 100%"
          :rows="8"
          type="textarea"
          placeholder="请输入跟踪记录"/>
    </el-form-item>

    <el-form-item label="跟踪方式" prop="noteWay">
      <el-select
          v-model="clueRemark.noteWay"
          placeholder="请选择跟踪方式"
          style="width: 100%"
          clearable>
        <el-option
            v-for="item in noteWayOptions"
            :key="item.id"
            :label="item.typeValue"
            :value="item.id"/>
      </el-select>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="clueRemarkSubmit">提 交</el-button>
      <el-button type="success" @click="convertCustomer" v-if="clueDetail.state !== -1">转换客户</el-button>
      <el-button type="success" plain @click="goBack">返 回</el-button>
    </el-form-item>

  </el-form>

  <el-table
      :data="clueRemarkList"
      style="width: 100%">
    <el-table-column type="index" label="序号" width="100"/>
    <el-table-column property="noteWayDO.typeValue" label="跟踪方式" width="150"/>
    <el-table-column property="noteContent" label="跟踪内容" width="150"/>
    <el-table-column property="createTime" label="跟踪时间" width="150"/>
    <el-table-column property="createByDO.name" label="跟踪人"/>
    <el-table-column property="editByDO.name" label="编辑人"/>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button type="success" @click="edit(scope.row.id)">编辑</el-button>
        <el-button type="danger" @click="del(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-pagination
      background
      layout="prev, pager, next"
      :page-size="pageSize"
      :total="total"
      @prev-click="toPage"
      @next-click="toPage"
      @current-change="toPage"/>

  <!--  编辑线索跟踪记录的弹窗（对话框）-->
  <el-dialog v-model="clueRemarkDialogVisible" title="编辑线索跟踪记录" center width="55%"
             draggable>
    <el-form ref="editClueRemarkRefFrom" :model="editClueRemarkQuery" label-width="110px"
             :rules="editClueRemarkRules">
      <el-form-item label="跟踪方式" prop="noteWay">
        <el-select
            v-model="editClueRemarkQuery.noteWay"
            placeholder="请选择跟踪方式"
            style="width: 100%"
            clearable>
          <el-option
              v-for="item in noteWayOptions"
              :key="item.id"
              :label="item.typeValue"
              :value="item.id"/>
        </el-select>
      </el-form-item>

      <el-form-item label="跟踪内容" prop="noteContent">
        <el-input
            v-model="editClueRemarkQuery.noteContent"
            style="width: 100%"
            :rows="8"
            type="textarea"
            placeholder="请输入活动备注"/>
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="clueRemarkDialogVisible = false">关 闭</el-button>
        <el-button type="primary" @click="editClueRemarkSubmit">提 交</el-button>
      </div>
    </template>
  </el-dialog>

  <!--线索转换为客户的弹窗（对话框）-->
  <el-dialog v-model="convertCustomerDialogVisible" title="线索转换客户" width="55%" center>
    <el-form ref="convertCustomerRefForm" :model="customerQuery" label-width="110px" :rules="convertCustomerRules">
      <el-form-item label="意向产品" prop="product">
        <el-select v-model="customerQuery.product" placeholder="请选择" style="width: 100%;">
          <el-option
              v-for="item in productOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"/>
        </el-select>
      </el-form-item>
      <el-form-item label="客户描述" prop="description">
        <el-input
            v-model="customerQuery.description"
            :rows="8"
            type="textarea"
            placeholder="请输入客户描述"/>
      </el-form-item>
      <el-form-item label="下次跟踪时间" prop="nextContactTime">
        <el-date-picker
            v-model="customerQuery.nextContactTime"
            type="datetime"
            style="width: 100%;"
            value-format="YYYY-MM-DD HH:mm:ss"
            placeholder="请选择下次跟踪时间"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="convertCustomerDialogVisible = false">关 闭</el-button>
        <el-button type="primary" @click="convertCustomerSubmit">转 换</el-button>
      </span>
    </template>
  </el-dialog>


</template>


<script>
import {doDelete, doGet, doPost, doPut} from "../http/httpRequest.js";
import {goBack, messageConfirm, messageTip} from "../util/util.js";

export default {
  name: "ClueDetailView",

  //注入
  inject: ['reload'],

  data() {
    return {
      //线索详情对象，初始值为空
      clueDetail: {
        ownerDO: {},
        activityDO: {},
        appellationDO: {},
        needLoanDO: {},
        intentionStateDO: {},
        intentionProductDO: {},
        stateDO: {},
        sourceDO: {},
      },
      //线索跟踪记录对象，初始值是空
      clueRemark: {},
      //跟踪方式的下拉选项，初始值是空
      noteWayOptions: [{}],
      //线索跟踪记录验证规则
      clueRemarkRules: {
        noteContent: [
          {required: true, message: '请输入线索跟踪记录', trigger: 'blur'},
          {min: 5, max: 255, message: '线索跟踪记录长度在5到255个字符之间', trigger: 'blur'}
        ]
      },
      //线索跟踪记录列表，初始值是空
      clueRemarkList: [{
        createByDO: {},
        editByDO: {},
        noteWayDO: {},
      }],
      //分页时每页显示多少条数据
      pageSize: 0,
      //分页总共查询多少条数据
      total: 0,
      //线索跟踪内容弹窗是否显示
      clueRemarkDialogVisible: false,
      //编辑线索跟踪记录对象，初始值是空
      editClueRemarkQuery: {},
      //编辑线索跟踪记录验证规则
      editClueRemarkRules: {
        noteContent: [
          {required: true, message: '请输入线索跟踪记录', trigger: 'blur'},
          {min: 5, max: 255, message: '线索跟踪记录长度在5到255个字符之间', trigger: 'blur'}
        ],
        noteWay: [
          {required: true, message: '请选择跟踪方式', trigger: 'blur'}
        ],
      },
      //定义转换客户的弹窗是否弹出来
      convertCustomerDialogVisible: false,
      //线索转换为客户的form表单对象，初始值为空
      customerQuery: {},
      //定义线索转换为客户的验证规则
      convertCustomerRules: {
        product: [
          {required: true, message: '请选择意向产品', trigger: 'blur'},
        ],
        description: [
          {required: true, message: '请输入客户描述', trigger: 'blur'},
          {min: 5, max: 255, message: '客户描述长度在5到255个字符之间', trigger: 'blur'}
        ],
        nextContactTime: [
          {required: true, message: '请选择下次跟踪时间', trigger: 'blur'},
        ]
      },
      //意向产品的下拉选项，初始值是空
      productOptions: [{}],

    }
  },

  mounted() {
    this.loadClueDetail();
    this.loadActivityRemarkList(1);
    this.loadDicValue('noteWay');
    this.loadDicValue('product')
  },

  methods: {
    goBack,

    //加载线索详情
    loadClueDetail() {
      let id = this.$route.params.id;
      doGet("/api/clue/detail/" + id, {}).then(resp => {
        if (resp.data.code === 200) {
          this.clueDetail = resp.data.data;
        }
      })
    },

    //提交线索跟踪记录
    clueRemarkSubmit() {
      this.$refs.clueRefFrom.validate((isValid) => {
        if (isValid) {
          doPost("/api/clue/remark", {
            clueId: this.clueDetail.id,
            noteContent: this.clueRemark.noteContent,
            noteWay: this.clueRemark.noteWay
          }).then(resp => {
            if (resp.data.code === 200) {
              messageTip("提交成功", "success");
              //刷新
              this.reload();
            } else {
              messageTip("提交失败", "error");
            }
          })
        }
      })
    },

    //加载字典数据
    loadDicValue(typeCode) {
      doGet("/api/dicvalue/" + typeCode, {}).then(resp => {
        if (resp.data.code === 200) {
          if (typeCode === 'noteWay') {
            this.noteWayOptions = resp.data.data;
          } else if (typeCode === 'product') {
            this.productOptions = resp.data.data;
          }
        }
      })
    },

    //查询线索跟踪列表
    loadActivityRemarkList(current) {
      doGet("/api/clue/remark", {
        current: current, //当前查询第几页
        clueId: this.$route.params.id
      }).then(resp => {
        if (resp.data.code === 200) {
          this.clueRemarkList = resp.data.data.list;
          this.pageSize = resp.data.data.pageSize;
          this.total = resp.data.data.total;
        }
      })
    },

    //分页函数（current是element-plus组件传过来，就是传的当前页）
    toPage(current) {
      this.loadActivityRemarkList(current);
    },

    //编辑线索跟踪记录
    edit(id) {
      this.clueRemarkDialogVisible = true;
      //把原来的数据显示出来
      doGet("/api/clue/remark/" + id, {}).then(resp => {
        if (resp.data.code === 200) {
          this.editClueRemarkQuery = resp.data.data;
        }
      })
    },

    //提交编辑线索跟踪记录
    editClueRemarkSubmit() {
      this.$refs.editClueRemarkRefFrom.validate((isValid) => {
        if (isValid) {
          doPut("/api/clue/remark", {
            id: this.editClueRemarkQuery.id,
            noteContent: this.editClueRemarkQuery.noteContent,
            noteWay: this.editClueRemarkQuery.noteWay,
          }).then(resp => {
            if (resp.data.code === 200) {
              messageTip("编辑成功", "success");
              //刷新
              this.reload();
            } else {
              messageTip("编辑失败", "error");
            }
          })
        }
      })
    },

    //删除线索跟踪记录
    del(id) {
      messageConfirm("您确定要删除该数据吗？").then(() => {//用户点击“确定”按钮就会触发then函数
        doDelete("/api/clue/remark/" + id, {}).then(resp => {
          if (resp.data.code === 200) {
            messageTip("删除成功", "success");
            //页面刷新
            this.reload();
          } else {
            messageTip("删除失败，原因：" + resp.data.msg, "error");
          }
        })
      }).catch(() => {//用户点击“取消”按钮就会触发catch函数
        messageTip("取消删除", "warning");
      })
    },

    //弹出转换客户弹窗
    convertCustomer() {
      this.convertCustomerDialogVisible = true;
    },

    //线索转化客户
    convertCustomerSubmit() {
      this.$refs.convertCustomerRefForm.validate((isValid) => {
        if (isValid) {
          doPost("/api/clue/customer", {
            clueId: this.clueDetail.id,
            product: this.customerQuery.product,
            description: this.customerQuery.description,
            nextContactTime: this.customerQuery.nextContactTime
          }).then(resp => {
            if (resp.data.code === 200) {
              messageTip("转换成功", "success");
              //刷新
              this.reload();
            } else {
              messageTip("转换失败", "error");
            }
          })
        }
      })

    }


  }
}
</script>

<style scoped>
.detail {
  background-color: #F0FFFF;
  width: 100%;
  padding-left: 15px;
}
</style>